<clr-modal [clrModalSize]="''" [(clrModalOpen)]="modalOpened">
  <h3 class="modal-title">{{title}}</h3>
  <div class="modal-body">
    <form #publishForm="ngForm" clrForm clrLayout="horizontal">
      <section class="form-block">
        <div class="clr-form-control clr-row">
          <label class="clr-control-label required">
            {{'TITLE.CLUSTER' | translate}}
          </label>
          <div class="clr-control-container">
            <div *ngFor="let cluster of clusters;let i=index" [class.clr-error]="!replicaValidation(cluster)">
              <div class="clr-input-wrapper">
                <label class="clr-checkbox-wrapper">
                  <input  class="clr-checkbox" [(ngModel)]="clusterMetas[cluster].checked" type="checkbox" id="{{i}}-check" name="{{i}}-check">
                  <label for="{{i}}-check">{{cluster}}</label>
                </label>
                <ng-container *ngIf="actionType==0 || actionType==2 || actionType == 5">
                  <input class="clr-input" placeholder="部署份数" [(ngModel)]="clusterMetas[cluster].value" id="{{cluster}}-replica" [readonly]="actionType == 2"
                    name="{{cluster}}-replica" type="number"  style="margin-left: 20px;">
                  <span class="clr-subtext" *ngIf="!replicaValidation(cluster)">部署份数超过系统最大限制{{replicaLimit}}</span>
                </ng-container>
              </div>
            </div>
          </div>
        </div>
        <div class="clr-form-control clr-row"  *ngIf="actionType==3">
          <label class="clr-control-label">
            {{'ACTION.FORCE_DROP' | translate}}
            <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
              <clr-icon shape="info-circle" size="24"></clr-icon>
              <span class="tooltip-content">{{'MESSAGE.FORCE_DROP' | translate}} </span>
            </a>
          </label>
          <div class="clr-control-container">
            <div class="clr-toggle-wrapper">
              <input class="clr-toggle" [(ngModel)]="forceOffline" type="checkbox" id="force-offline-id" name="force-offline">
              <label for="force-offline-id"></label>
            </div>
          </div>
        </div>
      </section>
    </form>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
      <button type="button" class="btn btn-primary" [disabled]="!isValid"
              (click)="onSubmit()">{{'BUTTON.CONFIRM' | translate}}</button>
    </div>
  </div>

</clr-modal>
